<template>
    <div :class="$style['navigation-container']">
        <div :class="$style['navigation-title-wrapper']">
            <div :class="$style['navigation-title']"><span>功能导航</span></div>
        </div>
        <el-scrollbar :class="$style['navigation-content-wrapper']">
            <el-row :class="$style['navigation-row-wrapper']">
                <el-col :span="3" v-for="(item, index) in list" :key="index" :class="$style['navigation-col']"
                    @click="toNavPage(item)">
                    <div :class="$style['navigation-item']">
                        <cy-icon :code="item.icon" :size="60" :class="$style['icon-gradient']" />
                    </div>
                    <span>{{ item.name }}</span>
                </el-col>
            </el-row>
        </el-scrollbar>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import CyPlayerCls from '@/utils/cy.player'
import CyIcon from '@/components/Icon.vue'
import { useRouter } from 'vue-router'
import { fetchMavMenus } from '@/api/role'
const router = useRouter()
const list = ref([])
const toNavPage = (item) => {
    //实时视频
    if (item.id == 17) {
        const cyPlayer = new CyPlayerCls()
        const data = {
            server_ip: localStorage.getItem('serverIp'),
            server_port: localStorage.getItem('serverPort'),
            uid: localStorage.getItem('uid')
        }
        cyPlayer.openLiveVideo(data)
        //cyPlayer.openPlayBack()
        return
    }

    //报警墙
    if (item.id == 129) {
        const cyPlayer = new CyPlayerCls()
        cyPlayer.openALarmWall()
        return
    }
    if (item.is_blank == 2) {
        //新页面打开
        window.open(item.url, '_blank')
        return
    }
    if (item.children != 'undefined' && item.children.length > 0) {
        localStorage.setItem('menu_child', JSON.stringify(item.children))
    }
    toUrl(item, item.url)
}
const toUrl = (object, url) => {
    if (object.children && object.children.length > 0) {
        if (object.children[0].children && object.children[0].children.length > 0) {
            toUrl(object.children[0])
        } else {
            router.push(object.children[0].url)
        }
    } else {
        router.push(url)
    }
}
const initMenus = async () => {
    if (!localStorage.getItem('navMenus')) {
        const result = await fetchMavMenus()
        localStorage.setItem('navMenus', JSON.stringify(result.data))
        list.value = result.data
    } else {
        list.value = JSON.parse(localStorage.getItem('navMenus'))
    }
}
onMounted(() => {
    initMenus()
})
</script>
<style lang="scss" module>
.navigation-container {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.flex-center {
    display: flex;
    justify-content: center;
    height: 90px;
}

.navigation-title-wrapper {
    display: flex;
    justify-content: center;
    height: 90px;
}

.navigation-title {
    background-image: url("@/assets/navigation/bg.png");
    width: 310px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 37px;
    color: #4891FF;

    & span {
        background: linear-gradient(0deg, #4DD3FF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.navigation-content-wrapper {
    flex: 1;
    padding: 0 100px 80px 100px;
    display: flex;

    & [class~='el-scrollbar__wrap'] {
        width: 100%;
        height: 100%;
    }

    & [class~='el-scrollbar__view'] {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.navigation-row-wrapper {
    width: 100%;
}

.navigation-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #AEEBFF;
    padding: 20px 0;
}

.navigation-item {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0C2C48;
    border-radius: 50%;
    border: 1px solid #1E5A90;
    margin-bottom: 10px;
    cursor: pointer
}

.icon-gradient {
    background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>